<template>
  <el-dialog
    ref="wkDialog"
    :visible="visible"
    :append-to-body="true"
    :close-on-click-modal="false"
    :title="title"
    width="800px"
    @close="handleCancel">
    <div class="form-add-dialog-body">
      <el-form
        ref="formAddForm"
        :model="editForm"
        :rules="rules"
        :validate-on-rule-change="false"
        class="wk-form"
        inline
        style="overflow: hidden"
        label-position="top">
        <div v-for="(item, index) in fields" :key="index">
          <wk-form-item
            v-if="!item.children"
            :index="index"
            :field-from="editForm"
            :item="item"
            :disabled="item.disabled"
            :style-percent="item.percent ? item.percent : '50%'"
          />
          <create-sections v-else :title="item.label">
            <wk-form-item
              v-for="(child, cIndex) in item.children"
              :key="cIndex"
              :index="cIndex"
              :field-from="editForm.children[index - 1]"
              :item="child"
              :disabled="child.disabled"
              :style-percent="child.percent ? child.percent : '50%'"
            />
          </create-sections>
        </div>
      </el-form>
      <slot />
    </div>
    <span
      slot="footer"
      class="dialog-footer">
      <el-button @click.native="handleCancel">取消</el-button>
      <el-button
        v-debounce="handleConfirm"
        type="primary">保存</el-button>
    </span>
  </el-dialog>
</template>

<script>
import WkForm from '@/components/NewCom/WkForm'
import { crmFileSaveUrl } from '@/api/common'

import { objDeepCopy } from '@/utils'
import ElDialogLoadingMixin from '@/mixins/ElDialogLoading'
import WkFormItem from '@/components/NewCom/WkForm/WkFormItem'
import CreateSections from '@/components/CreateSections'

export default {

  // 组织操作
  name: 'FormAddDialog',
  components: {
    WkForm,
    WkFormItem,
    CreateSections
  },
  mixins: [ElDialogLoadingMixin],
  props: {
    title: String,
    form: Object,
    rules: Object,
    fields: Array,
    visible: {
      type: Boolean,
      required: true,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      editForm: {},
      editorConfig: {
        placeholder: '请输入...',
        autoFocus: true,
        MENU_CONF: {}
      },
      showEditor: false,
      // 直播图片上传路径
      crmFileSaveUrl: crmFileSaveUrl
    }
  },
  computed: {},
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.$nextTick(() => {
            if (this.$refs.formAddForm) {
              this.editForm = objDeepCopy(this.form || {})
              this.$refs.formAddForm.clearValidate()
            }
          })
        }
      },
      immediate: true
    },
    form: {
      handler(val) {
        this.editForm = objDeepCopy(this.form || {})
      },
      immediate: true
    },
    editForm: {
      handler(val) {
        if (this.editForm.children) {
          this.editForm.children.forEach(item => {
            if (item.target && item.actual) {
              item.completedWeek = Math.floor(Number(item.actual) * 100 / Number(item.target))
            }
          })
        }
      },
      deep: true
    }
  },
  mounted() {},
  methods: {
    /**
     * 取消选择
     */
    handleCancel() {
      this.$emit('update:visible', false)
      this.showEditor = false
    },

    /**
     * 点击确定
     */
    handleConfirm() {
      this.$refs.formAddForm.validate(valid => {
        if (valid) {
          this.$emit('update:form', this.editForm)
          this.$emit('pass')
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.form-add-dialog-body {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 55vh;
}
// 参与人
.send-user {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.send-user + .send-user {
  margin-left: 7px;
}
.more-user-btn {
  background-color: #F3F7FF;
  border-radius: 50%;
  padding: 5px;
  font-size: 12px;
  color: #666;
  margin-left: 7px;
  &:hover {
    background-color: $xr-color-primary;
    color: white;
  }
}

.img-uploader /deep/ .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.img-uploader /deep/ .el-upload:hover {
  border-color: #409EFF;
}
.add-img {
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
</style>
